<template>
  <el-form-item class="specific-condition-container" :label="label">
    <form-cascader
      v-if="field.formType == 'cascader'"
      :field="field"
      :value="value.types"
      :tree="field.dataSource"
      @update="update"
      :class="{'input-is-error': currentItemValidation.fields.some(k => k === 'types')}"
    />
    <el-select
      v-else
      :value="value.types"
      @input="(val) => updateVal({val, action: 'types', })"
      multiple
      collapse-tags
      filterable
      style="margin-left: 20px;"
      :class="{'input-is-error': currentItemValidation.fields.some(k => k === 'types')}"
      :placeholder="value.placeHolder || $t('common.placeholder.select')">
      <el-option
        v-for="(item, index) in options"
        :key="`${item.value}_${index}`"
        :label="item.label"
        :disabled="otherConditionValue.some(val => val === item.value)"
        :value="item.value">
      </el-option>
    </el-select>
    <div class="detail">
      <p>
        <!-- TODO 国际化待办 拼接待翻译 -->
        <span class="ordinary-text">{{config.prefix}}负责人{{config.label}}</span>
        <el-tooltip :content="config.tip" placement="top" effect="light">
          <el-input :value="value.executorScore" @input="(val) => updateVal({val, action: 'executorScore', })" :class="{'input-is-error': currentItemValidation.fields.some(k => k === 'executorScore')}" class="count-input" :placeholder="$t('common.placeholder.inputContent')"></el-input>
        </el-tooltip>
        <span class="ordinary-text">{{config.unit}}</span>
      </p>
      <p>
        <!-- TODO 国际化待办 拼接待翻译 -->
        <span class="ordinary-text">{{config.prefix}}协同人{{config.label}}</span>
        <el-tooltip :content="config.tip" placement="top" effect="light">
          <el-input :value="value.assistantScore" @input="(val) => updateVal({val, action: 'assistantScore', })" :class="{'input-is-error': currentItemValidation.fields.some(k => k === 'assistantScore')}" class="count-input" :placeholder="$t('common.placeholder.inputContent')"></el-input>
        </el-tooltip>
        <span class="ordinary-text">{{config.unit}}</span>
      </p>
    </div>

    <el-button class="delete-contact-btn" type="danger" style="height: 32px;" v-if="index > 1" @click="dele">{{$t('common.base.delete')}}</el-button>
    <!--<base-button type="danger" @event="deleteCondition">添加条件</base-button>-->
  </el-form-item>
</template>

<script>
import { t } from '@src/locales';
export default {
  name: 'specific-condition',
  props: {
    label: {
      type: String,
      default: () => (`${t('common.base.condition')}1`)
    },
    options: {
      type: Array,
      default: () => ([])
    },
    rules: {
      type: Array,
      default: () => ([])
    },
    validation: {
      type: Array,
      default: () => ([])
    },
    config: {
      type: Object,
      default: () => ({})
    },
    field: {
      type: Object,
      default: () => ({})
    },
  },
  data() {
    return {
    }
  },
  computed: {
    index() {
      // 这里的index是从1开始
      if (this.label === t('performance.label.excludeCondition')) return 1;
      return Number(this.label.match(/\d{1,}/g)[0]);
    },
    value() {
      return this.rules[this.index - 1];
    },
    currentItemValidation() {
      return this.validation[this.index - 1];
    },
    otherConditionValue() {
      let arr = [];
      this.rules
        .filter((el, index) => index !== this.index - 1)
        .map(({types}) => types)
        .forEach(types => {
          // types 是(每个条件选择了哪几个工单或者自定义字段的id)一个数组， 直接return map后的结果会是一个二维数组
          arr = [...arr, ...types]
        });
      return arr;
    }
  },
  methods: {
    update({field, newValue }){
      if(!this.rules.some(item=> item.types.length && JSON.stringify(item.types) === JSON.stringify(newValue))){
        return this.updateVal({action:'types', val: newValue})
      }
      this.rules[this.index - 1].types = [];
      this.$message.warning(this.$t('performance.tip.doAllowDuplicates'));
    },
    updateVal({action, val}) {
      let newVal = {
        ...this.value,
        [action]: val,
      };
      this.$emit('update', {
        newVal,
        index: this.index - 1,
      });
    },
    dele() {
      this.$emit('delete-condition', {
        action: 'delete',
        index: this.index - 1,
      })
    }
  },
}
</script>

<style lang="scss">
  .input-is-error input {
    border-color: #f56c6c;
  }

  .specific-condition-container {
    display: flex;
    padding: 10px 0;
    .el-form-item__label {
      margin-bottom: 40px !important;
      margin-right: 8px;
    }

    .el-form-item__content {
      margin-left: 0!important;
      flex-grow: 1;
      display: flex;

      .el-input, .el-select {
        height: 32px;
        margin: 0!important;
      }

      .detail {
        margin-left: 20px;
        flex-grow: 1;
        padding-left: 12px;

        .el-select {
          align-items: center;
        }

        .ordinary-text {
          padding: 0 10px;
        }

        p {
          margin: 0;
          line-height: 32px;

          .count-input {
            width: 60px;
          }
        }
        P:first-child {
          margin-bottom: 10px;
        }
      }
    }
  }

</style>